<template>
  <div>
    <el-container>
      <el-aside width="400px">
        <el-form :key="i"
                 :inline="true"
                 v-for="(i, v) in xindata1"
                 class="demo-form-inline">
          <el-form-item>{{ cebiandata[v].menu_name }}</el-form-item>
          <el-form-item>{{ cebiandata[v].menu_amount }}</el-form-item>
          <el-form-item>{{ cebiandata[v].menu_price }}&nbsp;元</el-form-item>
          <el-form-item>{{ cebiandata[v].menu_size }}</el-form-item>
          <el-form-item></el-form-item>
          <el-button type="primary"
                     @click="quxiao(i)">取消</el-button>
        </el-form>
        <div id="cebian">
          <el-pagination :page-size="total1"
                         layout="prev, pager, next"
                         :total="cebiandata.length"
                         @current-change="changepage1">
          </el-pagination>
          <el-button type="primary"
                     @click="qingkong">清空</el-button>
          <el-button type="primary"
                     style="margin-right: 50px; margin-left: 58px"
                     @click="xiadan">下单</el-button>
          <el-button type="primary"
                     @click="jiezhang">结账</el-button>
        </div>
      </el-aside>
      <el-container style="width: 100%">
        <div id="zhuti">
          <el-main style="padding-bottom: 0；width:100%">
            <el-input v-model="search"
                      id="duan"
                      placeholder="请输入你要搜索的商品"
                      prefix-icon="el-icon-search"
                      @keyup.enter.native="onSearch"></el-input>
            <div id="hengfang">
              <el-button type="primary"
                         @click="onSearch">搜索</el-button>
              <el-button type="primary"
                         @click="onReset">重置</el-button>
            </div>
            <div id="showimg">
              <el-row>
                <el-col :span="4"
                        :key="i"
                        v-for="(item,i) in xindata">
                  <el-card :body-style="{
                      padding: '15px',
                      height: '130px',
                    }"
                           shadow="hover">
                    <img @click="joincebian(item)"
                         src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                         class="image"
                         style="float: left" />
                    <div @click="joincebian(item)">
                      <span id="zixiao">
                        {{ item.menu_name }}
                        <br />
                        <br />
                        {{ item.menu_amount }}克
                        <br />
                        <span style="color: red; float: right">{{ item.menu_price }}元
                        </span>
                      </span>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
            <el-pagination :page-size="total"
                           layout="prev, pager, next"
                           :total="diedata.length"
                           @current-change="changepage">
            </el-pagination>
          </el-main>
        </div>
      </el-container>
    </el-container>
    <!-- 结账弹出框 -->
    <el-dialog title="结账"
               :visible.sync="dialogVisible"
               width="30%">
      <div style="text-align: center">
        订单总计：<span style="color: red">{{ sum }}元</span>
      </div>
      <span slot="footer">
        <div style="text-align: center">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="jiezhang2">结 账</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      title: "",
      search: "",
      diedata: [],
      cebiandata: [],
      page: 1,
      total: 24,
      page1: 1,
      total1: 11,
      sum: 0,
      dialogVisible: false,
    };
  },
  methods: {
    xiadan () {
      console.log(this.cebiandata);
    },

    onReset () {
      this.page = 1;
      this.search = "";
      this.title = "";
      this.getdata();
    },
    onSearch: function () {
      this.page = 1;
      // trim（）方法  去除首位空格
      if (this.search.trim()) {
        this.title = this.search;
      } else {
        this.search = "";
      }
    },
    jiezhang2 () {
      this.dialogVisible = false;
      this.qingkong();
      this.sum = "";
      this.$message({
        message: "结账成功！！",
        type: "success",
      });
    },

    jiezhang () {
      this.sum = this.cebiandata.reduce((sum, e) => sum + e.menu_price, 0);
      if (this.sum <= 0) {
        this.dialogVisible = false;
      } else {
        this.dialogVisible = true;
      }
    },

    qingkong () {
      this.cebiandata.splice(0, this.cebiandata.length);
    },

    getdata: function () {
      this.$axios({
        url: "/order/getdata",
      }).then((res) => {
        this.diedata = res.data.data;
        //将拿到的数据给到表格绑定的数组
      });
    },
    joincebian (a) {
      this.cebiandata.push(a);
    },
    quxiao (b) {
      let index = this.cebiandata.findIndex(
        (item) => item.menu_id === b.menu_id
      );
      this.cebiandata.splice(index, 1);
    },
    changepage (m) {
      this.page = m;
    },
    changepage1 (a) {
      this.page1 = a;
    },
  },
  mounted () {
    this.getdata();
  },
  computed: {
    xindata () {
      if (this.title) {
        let arr = this.diedata.filter((v) => {
          if (v.menu_name.indexOf(this.title) != -1) {
            return v;
          }
        });
        return arr.slice((this.page - 1) * this.total, this.page * this.total);
      } else {
        return this.diedata.slice(
          (this.page - 1) * this.total,
          this.page * this.total
        );
      }
    },
    xindata1 () {
      return this.cebiandata.slice(
        (this.page1 - 1) * this.total1,
        this.page1 * this.total1
      );
    },
  },
};
</script>
<style lang="less" scope>
.el-card {
  cursor: pointer;
}
#hengfang {
  position: absolute;
  top: 110px;
  left: 915px;
}
#zhuti {
  width: 100%;
}
.el-form .el-button {
  position: absolute;
  left: 320px;
  margin-top: 3px;
}
#zixiao {
  font-size: 13px;
  font-weight: 600;
}
.el-aside {
  border: 1px solid rgb(230, 229, 229);
  height: 700px;
}
.el-header {
  border: 1px solid rgb(230, 229, 229);
  border-left: none;
}
#duan {
  width: 500px;
  height: 35px;
}
.el-main {
  border: 1px solid rgb(230, 229, 229);
  height: 700px;
  padding: 0;
}
#showimg {
  height: 520px;
  border: 1px solid rgb(230, 229, 229);
}

#cebian {
  position: absolute;
  top: 720px;
}

.el-card img {
  height: 100px;
  width: 100px;
  border-radius: 20%;
  display: inline-block;
}
#cebian .el-button {
  width: 90px;
  height: 50px;
  margin-top: 10px;
}

input {
  margin: 3px 0 3px 11px;
}
.el-pagination {
  text-align: center;
  margin-top: 50px;
}
#xiaanniu {
  text-align: center;
}
.el-card {
  width: 212.44px;
  height: 130px;
}
</style>